<template>
  <div style="background: #E6E6E6;padding-top: 14px;">
    <sunDrawerBack show="show_information" :parent="this.$parent.$parent" />
    <el-page-header class="sun-el-page-header" :content="'课程资料【' + teacherName + '】'" @back="showHide('show_processLookInformation')" />
    <div class="box">
      <el-form ref="refForm" class="fromBox" label-width="150px">
        <div style="cut-off" />
        <span v-for="item in info" :key="item.key">
          <span v-if="item.category === 'field'">
            <div class="category_box">
              <div class="name_box">{{ item.name }}</div>
              <span v-if="item.type === 'text' || !item.type">
                <div style="padding: 10px">
                  <el-form-item
                    :label="item.name + ' :'"
                    :prop="item.key"
                  >
                    <el-input
                      v-model="item.content"
                      readonly
                    />
                  </el-form-item>
                </div>
              </span>
              <span v-if="item.type === 'textArea'">
                <div style="padding: 10px">
                  <el-form-item
                    :label="item.name + ' :'"
                    :prop="item.key"
                  >
                    <el-input
                      v-model="item.content"
                      readonly
                      autosize
                      show-word-limit
                      :type="item.type.toLowerCase()"
                    />
                  </el-form-item>
                </div>
              </span>
              <span v-if="item.type === 'richText'">
                <div style="padding: 10px;">
                  <el-form-item
                    style="margin-bottom: 0"
                    :label="item.name + ' :'"
                    :prop="item.key"
                  />
                  <div style="margin-bottom: 20px;margin-left: 150px">
                    <template>
                      <span v-html="item.content" />
                    </template>
                  </div>
                </div>
              </span>
              <span v-if="item.type === 'file' || item.type === 'files'">
                <div class="upload_item_box">
                  <el-form-item
                    :label="item.name + ' :'"
                    :prop="item.key"
                  >
                    <el-upload
                      disabled
                      class="sun-el-upload"
                      :file-list="item.content"
                      action=""
                      :on-preview="onPreview"
                      list-type="text"
                    />
                  </el-form-item>
                  <div class="downloadBox">
                    <div v-for="download in item.content" :key="download.path" @click="$XhrDownload(download.path, download.name, '')">
                      <i class="el-icon-download" style="color: #409EFF" />
                    </div>
                  </div>
                </div>
              </span>
            </div>
          </span>
          <span v-if="item.category === 'group'">
            <div class="category_box">
              <div class="name_box">{{ item.name }}</div>
              <span v-for="el in item.children" :key="el.key">
                <div>
                  <span v-if="el.type === 'text' || !el.type">
                    <div style="padding: 10px">
                      <el-form-item
                        :label="el.name + ' :'"
                        :prop="el.key"
                      >
                        <el-input
                          v-model="el.content"
                          readonly
                        />
                      </el-form-item>
                    </div>
                  </span>
                  <span v-if="el.type === 'textArea'">
                    <div style="padding: 10px">
                      <el-form-item
                        :label="el.name + ' :'"
                        :prop="el.key"
                      >
                        <el-input
                          v-model="el.content"
                          readonly
                          autosize
                          show-word-limit
                          :type="el.type.toLowerCase()"
                        />
                      </el-form-item>
                    </div>
                  </span>
                  <span v-if="el.type === 'richText'">
                    <div style="padding: 10px">
                      <el-form-item
                        style="margin-bottom: 0"
                        :label="el.name + ' :'"
                        :prop="el.key"
                      />
                      <div style="margin-bottom: 20px;margin-left: 150px">
                        <template>
                          <span v-html="el.content" />
                        </template>
                      </div>
                    </div>
                  </span>
                  <span v-if="el.type === 'file' || el.type === 'files'">
                    <div class="upload_item_box">
                      <el-form-item
                        :label="el.name + ' :'"
                        :prop="el.key"
                      >
                        <el-upload
                          disabled
                          class="sun-el-upload"
                          :file-list="el.content"
                          action=""
                          :on-preview="onPreview"
                          list-type="text"
                        />
                      </el-form-item>
                      <div class="downloadBox">
                        <div v-for="download in el.content" :key="download.path" @click="$XhrDownload(download.path, download.name, '')">
                          <i class="el-icon-download" style="color: #409EFF" />
                        </div>
                      </div>
                    </div>
                  </span>
                </div>
              </span>
            </div>
          </span>
        </span>
      </el-form>
    </div>
    <div class="but-list">
      <el-button size="mini" @click="showHide('show_processLookInformation')">关 闭</el-button>
    </div>
    <div class="cut-off" />
  </div>
</template>

<script>
import SunDrawerBack from '@/sun-components/SunDrawerBack'
// import { MessageBox } from 'element-ui'
export default {
  name: 'ProcessCommonPreviewDatum',
  components: { SunDrawerBack },
  props: {
    source: {
      type: String,
      default: ''
    },
    info: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
    }
  },
  computed: {
    teacherName() {
      return this.$parent.$parent.currentItem?.teacher?.name
    }
  },
  methods: {
    async onPreview(file) { // 文件预览及下载
      const _that = this
      if (file.target === 'blank') {
        window.open(file.path, '_blank')
      } else {
        _that.$parent.$parent.showPreview = true
        _that.$parent.$parent.previewFile = file
      }
      // const _that = this
      // MessageBox.confirm(``, `${file.name}`, {
      //   confirmButtonText: '预览',
      //   cancelButtonText: '下载',
      //   cancelButtonClass: 'confirmBg',
      //   showClose: true,
      //   distinguishCancelAndClose: true
      // }).then((confirm) => {
      //   if (file.target === 'blank') {
      //     window.open(file.path, '_blank')
      //   } else {
      //     _that.$parent.$parent.showPreview = true
      //     _that.$parent.$parent.previewFile = file
      //   }
      // }).catch((cancel) => {
      //   if (cancel === 'cancel') {
      //     _that.$XhrDownload(file.path, file.name, '', _that)
      //   }
      // })
    },
    showHide(type) {
      this.$parent.$parent.show_processLookInformation = false
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
  .sun-el-upload ::v-deep .el-upload{
    display: none !important;
  }
  .box { padding: 0 14px;margin-top: 51px; }
  .itemBottom {
    display: flex; flex-direction: row; align-items:center;
    margin-bottom: 22px;
    padding: 0 60px;
    line-height: 60px;
    background: #F2F2F2F2;
   }
  .opinion_box{
    width:calc(100% - 150px);
  }
  .opinion_input {
   margin-left: 20px;
  }
  .cut-off {
    height: 14px;width: 100%;background:#E6E6E6;
  }
  .category_box {
    border-radius: 6px;background:#FFFFFF;margin-bottom: 14px;overflow: hidden;
  }
  .name_box{
    font-weight: bold;background:#5B9BD5;font-size: 20px;color: #FFFFFF;text-align: center;line-height: 40px;
  }
  .but-list{
    width:calc(100% - 28px) !important;
    margin: 0 14px;
    // background: #FFFFFF;display: inline-block;width:calc(100% - 28px);padding: 28px 14px;border-radius:6px;margin: 0 14px;
  }
</style>
